import React from 'react';
import { observer } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';
import { Spin, Icon } from 'antd';
import './index.less';
import loadjs from 'loadjs';

const getLabel = WeaLocaleProvider.getLabel;

@observer
export default class ModeTriggerView extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      addVisible: false,
      loading: true,
    };
  }

  componentDidMount() {
    this._ace = window.ace;
    window.ace = null;
    this.loadCube();
  }

  componentWillUnmount() {
    window.ace = this._ace;
  }

  loadCube() {
    if (loadjs.isDefined('weaCubeEngine')) {
      this.setState({ loading: false });
      return;
    }

    const libUrl = '/spa/cube/static4engine/';

    loadjs([
      `${libUrl}engine.css`,
      `${libUrl}engine.js`,
    ], 'weaCubeEngine', {
      success: () => {
        this.setState({ loading: false });
      },
    });
  }

  changeType = () => {
    const { changeType, linkType } = this.props;

    changeType(linkType);
  }

  renderSpinTip(spining, tip) {
    return (
      <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@vzmw5i`}
        spining={spining}
        style={{ width: '100%', paddingTop: 200 }}
        tip={<div style={{ paddingTop: 10 }}>{tip}</div>}
      />
    );
  }

  render() {
    const { loading } = this.state;
    const { modeId, pageExpandId } = this.props;
    const relationBtn = () => <span className="wea-setting-to-relation-btn" onClick={this.changeType}> {getLabel('510979', '关联建模模块')}</span>;
    const tipContent = getLabel('523920', '当前应用未关联建模模块，无法设置#modulename，请先到【#relation】菜单下进行关联！')
      .replace('#modulename', getLabel('30056', '数据审批'));
    const tipContentArr = tipContent.split('#relation');
    const finalArr = [tipContentArr[0], relationBtn(), tipContentArr[1]];

    if (!modeId) {
      return (
        <div className="wea-edc-relation-tip">
          <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@gb64mo`} type="exclamation-circle" />
          {finalArr}
        </div>
      );
    }

    if (loading) return this.renderSpinTip(true);

    const { InterfaceView } = window.weaCubeEngine.com;

    return (
      <div className={'wea-edc-modetrigger'}>
        <InterfaceView ecId={`${this && this.props && this.props.ecId || ''}_InterfaceView@qf075f`} expendId={pageExpandId} modeid={Number(modeId)} edcModule={'trigger'} />
      </div>
    );
  }
}
